<!DOCTYPE html>
<html ng-app="app">

<head>
    <link rel="stylesheet" href="assets/stylesheets/example.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="../website_libs/dev_deps.js"></script>
    <script src="https://code.angularjs.org/1.3.3/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
    <script src="assets/scripts/controllers/issue-979-polygons-race.js"></script>
    <title>Map</title>
</head>

<body>
<div data-ng-controller="ctrl">
    <ui-gmap-google-map id="map"
                       center="map.center"
                       pan="map.pan"
                       zoom="map.zoom"
                       draggable="true"
                       refresh="map.refresh"
                       options="map.options"
                       events="map.events"
                       bounds="map.bounds">

        <ui-gmap-map-control template="polyButton.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl">
        </ui-gmap-map-control>

        <ui-gmap-map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl">
        </ui-gmap-map-control>

        <!--<ui-gmap-polygon ng-repeat="p in map.polys track by p.id" path="p.geom" fill="{ color: '#2c8aa7', opacity: '0.3' }"-->
                         <!--stroke="{ color: '#2c8aa7', weight: 3, opacity: '1.0' }" visible="true" geodesic="true" fit="false"-->
                         <!--editable="false" static="true" ng-cloak=""></ui-gmap-polygon>-->

        <ui-gmap-polygons control="map.polyControl" models="map.polys" path='"geom"' fill="{ color: '#2c8aa7', opacity: '0.3' }"
                         stroke="{ color: '#2c8aa7', weight: 3, opacity: '1.0' }" visible="true" geodesic="true" fit="false"
                         editable="false" static="true" ng-cloak=""
                         chunk="100" cleanchunk="200">

        </ui-gmap-polygons>

    </ui-gmap-google-map>
    <div>
        # of polygons: {{map.polys.length}}
        zoom: {{map.zoom}}
    </div>
</div>
</body>

</html>
